<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>班级页</title>
    <script src="./js/jquery-3.7.1.js"></script>
</head>
<body>
    <table border="1px" width="100%">
        <thead>
            <tr>
                <td colspan="2" style="text-align:center">
                    <span id="classNameId">班级名</span>
                    <button onclick="">显示或隐藏</button>
                </td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td width="20%">
                    <span class="kclb">
                        课程列表：
                    </span>
                </td>
                <td>
                    <span id="courseList"></span>
                </td>
            </tr>
        </tbody>
    </table>

    <table border="1px" width="100%">
        <thead>
            <tr>
                <td colspan="9" style="text-align:center">
                    <button>删一行</button>
                    <span>同学列表</span>
                    <button>加一行</button>
                </td>
            </tr>
        </thead>
        <tbody id="studentsTable">
            <!-- 学生列表将在这里生成 -->
        </tbody>
    </table>

    <script>
        var data = JSON.parse('{"className":"2022大数据G5","banzhuren":"邬琼","courseList":[{"courseName":"前端开发","year":2024,"teacherName":"申冀特","weekNumbers":4},{"courseName":"云计算","year":2024,"teacherName":"申冀特","weekNumbers":2},{"courseName":"Python","year":2024,"teacherName":"朱艳萍","weekNumbers":2},{"courseName":"Hadoop","year":2024,"teacherName":"左海威","weekNumbers":2},{"courseName":"Linux","year":2024,"teacherName":"楚王辉","weekNumbers":2}],"students":[{"number":1,"bigNumber":"2022400245","name":"刘政","gendar":"男","phone":"","age":17,"money":50,"hobby":"爱好","dream":"梦想","icon":"/img/liuzheng.jpg"},{"number":2,"bigNumber":"2022400245","name":"许烨","gendar":"男","phone":"","age":17,"money":50,"hobby":"爱好","dream":"梦想","icon":"/img/liuzheng.jpg"},{"number":3,"bigNumber":"2022400245","name":"刘琰萱 ","gendar":"男","phone":"","age":17,"money":50,"hobby":"爱好","dream":"梦想","icon":"/img/liuzheng.jpg"}]}');

        // 设置班级名称
        $("#classNameId").html(data.className);

        // 生成课程列表
        var courseListHTML = '';
        data.courseList.forEach(function(course) {
            courseListHTML += course.courseName + ' - ' + course.teacherName + '<br>';
        });
        $("#courseList").html(courseListHTML);

        // 生成学生列表
        var studentsHTML = '';
        data.students.forEach(function(student) {
            studentsHTML += '<tr><td>' + student.name + '</td></tr>';
        });
        $("#studentsTable").html(studentsHTML);
    </script>

    <style>
        .kclb{
            font-size: 20px;
        }
    </style>
</body>
</html>
